<template>
  <ul class="radio-group-wrap">
    <li
      v-for="item in options"
      :key="item.value"
      :class="[
        'radio-group__item-wrap',
        'throttle',
        modelValue === item.value
          ? 'radio-group__item--active'
          : ''
      ]"
      @click="handleChange(item.value)"
    >
      {{ item.label }}
    </li>
  </ul>
</template>

<script lang="ts" setup name="AppRadioGroup">
  type Option = {
    label: string;
    value: string;
  };

const emit = defineEmits(['update:modelValue', 'change']);

defineProps({
  modelValue: {
    type: String,
    default: '',
  },
  options: {
    type: Array<Option>,
    default: () => [],
  },
});

const handleChange = (value: string) => {
  emit('update:modelValue', value);
  emit('change', value);
};
</script>

<style lang="scss" scoped>
.radio-group-wrap {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  height: 28px;
  font-size: var(--#{$ns}-font-size-small);
  background-color: var(--#{$ns}-fill-color-extra-light);
  border: 1px solid var(--#{$ns}-border-color);
  border-radius: 4px;

  .radio-group__item-wrap {
    width: 40px;
    line-height: 26px;
    text-align: center;

    &.radio-group__item--active {
      font-weight: 600;
      color: var(--#{$ns}-color-white);
      background-color: var(--#{$ns}-color-primary);
      border-radius: 4px;
    }
  }
}
</style>
